<template>
  <div>
    <Box>
      <div slot="box">
        <a-form-model ref="ruleForm" layout="inline" :model="params">
          <a-form-model-item label="组织名称" prop="organizationName">
            <a-input v-model="params.organizationName	" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="组织类型" prop="organizationType" style="width: 270px">
            <a-select v-model="params.organizationType" placeholder="请选择" style="width: 200px">
              <a-select-option v-for="item of this.filterMultiDictText1('organization_type','')" :value="item.value" :key="item">
                {{ item.text }}
              </a-select-option>
            </a-select>
            <!--              <a-input v-model="data.name" placeholder="input placeholder" />-->
          </a-form-model-item>
          <a-form-model-item label="组织层级" prop="organizationLevel" style="width: 270px">
            <a-select v-model="params.organizationLevel" placeholder="请选择" style="width: 200px">
              <a-select-option v-for="item of this.filterMultiDictText1('level','')" :value="item.value" :key="item">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item >
            <a-button type="primary" @click="querys">
              查询
            </a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">
              重置
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <div style="padding:0 0 15px 0;width: 100%">
          <a-button @click="getexcel" style="margin-right: 20px">
            <a-icon type="upload" />导出
          </a-button>
<!--          <a-button @click="showModal" >-->
<!--            <a-icon type="import" />导入-->
<!--          </a-button>-->
        </div>
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="list"
          :showSelection="true"
          :showPagination="true"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a style="padding: 0 5px" @click="skip(record)">查看</a>
          </template>
        </CustomTable>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <Input ref="input" @warn="warn"></Input>
      </a-modal>
      <a-modal v-model="visible1" title="详细信息" @ok="handleOk1" width="600px" centered>
        <!--        <Input ref="input"></Input>-->
        <div v-for="item of this.warns">
          <div style="color: red;font-size: 15px">{{ item }}</div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { institution, getexcel, components, getexcelCom } from '@/api/xlgc/ComprehensiveBusiness'
import { filterDictTextByCache, getDictItems } from '@/components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '@api/api'
import Input from '@/views/xlgc/ComprehensiveBusiness/GroupBefense/ImportModal'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  name: 'Index',
  components: { Box, Input, CustomTable },
  data() {
    return {
      warns: [],
      selectedRowKeys: [],
      loading: false,
      detailed: {},
      ModalText: 'Content of the modal',
      visible: false,
      visible1: false,
      confirmLoading: false,
      size: 'large',
      input: {
        input1: ''
      },
      pageFilter: {
        index: 1,
        size: 10
      },
      params: {
        organizationName: '',
        organizationLevel: undefined,
        organizationType: undefined
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) =>
            `${(this.pageFilter.index - 1) * this.pageFilter.size + (index + 1)}` // 序号分页后连续
        },
        {
          title: '组织名称',
          dataIndex: 'organizationName',
          key: 'organizationName',
          scopedSlots: { customRender: 'organizationName' }

        },
        {
          title: '组织类型',
          dataIndex: 'organizationType',
          key: 'organizationType',
          scopedSlots: { customRender: 'organizationType' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('organization_type', text)
          }
        },
        {
          title: '组织层级',
          key: 'organizationLevel',
          dataIndex: 'organizationLevel',
          scopedSlots: { customRender: 'organizationLevel' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('level', text)
          }
        },
        {
          title: '业务指导部门',
          key: 'businessGuidanceDepartment',
          dataIndex: 'businessGuidanceDepartment',
          scopedSlots: { customRender: 'businessGuidanceDepartment' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('level', text)
          }
        },
        {
          title: '人员数量',
          key: 'numberPersonnel',
          dataIndex: 'numberPersonnel',
          scopedSlots: { customRender: 'numberPersonnel' }
        },
        {
          title: '主要职能',
          key: 'mainFunctions',
          dataIndex: 'mainFunctions',
          scopedSlots: { customRender: 'mainFunctions' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('level', text)
          }
        },
        {
          title: '操作',
          key: 'action',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      list: []
    }
  },
  mounted() {
    this.institution(this.pageFilter)
  },
  methods: {
    warn(val) {
      if (val.success) {
        console.log(val)
        this.visible = false
        this.institution(this.pageFilter)
      } else {
        console.log(val)
        this.warns = val.result
        console.log(this.warns)
        this.visible1 = true
      }
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.institution(this.pageFilter)
    },
    handleOk1() {
      this.visible1 = false
    },
    chongzhi() {
      this.institution(this.pageFilter)
    },
    showModal(val) {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      // this.visible = false;
      this.$refs.input.handleOk()
    },
    skip(val) {
      this.$router.push({
        path: '/GroupBefense/AgencyDetails',
        query: {
          name: val.organizationName,
          type: val.organizationType,
          level: val.organizationLevel,
          bdt: val.businessGuidanceDepartment,
          number: val.numberPersonnel,
          mainFunctions: val.mainFunctions
        }
      })
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) // res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    },
    getexcel() {
      getexcelCom({
        ids: this.selectedRowKeys,
        name:this.params.organizationName,
        level: this.params.organizationLevel,
        type:this.params.organizationType
      }).then(response => {
        // console.log(response)
        const fileName = '群防群控数据.xlsx'
        this.downLoadMix(response, fileName)
      }).catch(error => {
        console.log(error)
      })
    },
    querys() {
      console.log(this.params)
      this.institution(Object.assign({}, this.params, this.pageFilter))
    },
    onSelectChange(selectedRowKeys, item) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, item)
      this.selectedRowKeys = selectedRowKeys
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'index' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.institution(this.pageFilter)
    },
    institution(val) {
      return new Promise((resolve, reject) => {
        this.loading = true
        components(val).then(response => {
          if (response.success) {
            this.list = response.result
            this.loading = false
            resolve(response)
            console.log(response)
          }
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    handleChange1(val) {
      this.params.organizationType = val
      return val
    },
    handleChange2(val) {
      console.log(val)
      this.params.organizationLevel = val
      return val
    },
    filterMultiDictText1(dictCode, text) {
      // console.log(dictCode,text)
      // if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // console.log(this.$filterDictText(datas, text))
      // return this.$filterMultiDictText(datas, text)
      // return this.$filterDictText(datas, text)
      console.log(datas)
      return datas
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>

</style>
